<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>AngularJS与bootstrap结合实现分页工具条</title>

		<script src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css" />
		<script src="../js/angular.min.js"></script>
	</head>

	<body ng-app="appAngular" ng-controller="appController" ng-init="selectPage(1)">
		<table class="table">

			<tr>
				<th>序号</th>
				<th>编号</th>
				<th>名字</th>
				<th>价格</th>

			</tr>

			<tr ng-repeat="product in products">
				<td> {{$index+1}} </td>
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>

			</tr>

		</table>

		<ul class="pagination pull-right">
			<li>
				<a href="#" ng-click="prev()">
					<span aria-hidden="true">上一页</span>
				</a>
			</li>

			<li ng-repeat="page in pageList" ng-class="{active : atPage(page)}">
				<a href="#" ng-click="selectPage(page)">{{page}}</a>	<!-- 这个page对象不能做计算 -->
			</li>

			<li>
				<a href="#" ng-click="next()">
					<span aria-hidden="true">下一页</span>
				</a>
			</li>
		</ul>

	</body>

	<script>
		angular.module("appAngular", []).controller("appController", function($scope, $http) {
			
			// 分页必须变量
			var applyLeaf = 1; // 当前页(请求)
			var showCount = 2; // 每页显示条数(请求)
			var allCount = 0; // 总条数(响应)
			var allLeaf = 0; // 总页数(响应)
					
			
			// 定点查询
			$scope.selectPage = function(page) {
				
				$http({
					method: 'GET',
					url: "fy"+page+".json"
				}).then(function successCallback(response) {
					
					// 请求成功执行代码,商品主体
					$scope.products = response.data.products;
					
					// 总记录数
					allCount =  response.data.allCount;
					
					// 总页数=总条数/每页显示条数
					allLeaf = Math.ceil(allCount/showCount);
					
					// 显示当前页
					applyLeaf = page;
					
					// 只展示五个页码
					var start = page - 2 , end = page + 2;
					if(start < 1){
						start = 1;
						end = start + 4;
					}
					
					if(end > allLeaf){
						end = allLeaf;
						start = end-4;
					}
					
					//	将页码放进集合
					$scope.pageList = new Array();
					for (var i = start; i < end ;i++) {
						$scope.pageList.push(i);
					}		
					
							
							
					
				}, function errorCallback(response) {
					// 请求失败执行代码
					alert("错误");
				});
				
			};
			
			
			// 分支方法
			// 上一页
			$scope.prev = function() {
				$scope.selectPage(applyLeaf - 1);
			}

			// 下一页
			$scope.next = function() {
				$scope.selectPage(applyLeaf + 1);
			}

			// 是否为当前页
			$scope.atPage = function(page) {

				return page === applyLeaf;
			}
			
			
		});
	</script>

</html>